<script>
    var initPage9 = function () {
        $("#page-9").show();
        $("#page-9").css({
            "z-index": 10
        });
        setTimeout(function () {

            blinkPage9Hui(function () {
                showPage9Line(function () {
                    $("#page-9 .zs-1").show();
                    setTimeout(function () {
                        movePage9Word(function () {
                            $("#page-9 .zs-3").show();
                            $("#page-9 .zs-4").show();
                            setTimeout(function () {
                                $("#page-9 .zs-3").removeClass("fadeIn");
                                $("#page-9 .zs-4").removeClass("fadeIn");
                                setTimeout(function () {
                                    $("#page-9 .zs-3").addClass("fadeOut");
                                    $("#page-9 .zs-4").addClass("fadeOut");
                                }, 200);
                                hidePage9Word(function () {
                                    //step 2
                                    movePage9WordA(function () {
                                        showPage9Oile(function () {
                                            $("#page-9 .zs-6").show();
                                            $("#page-9 .zs-7").show();


                                            setTimeout(function () {
                                                $("#page-9 .zs-6").removeClass("fadeIn");
                                                $("#page-9 .zs-7").removeClass("fadeIn");
                                                $("#page-9 .zs-1").removeClass("fadeIn");
                                                $("#page-9 .zs-8").removeClass("fadeIn");
                                                setTimeout(function () {
                                                    $("#page-9 .zs-6").addClass("fadeOut");
                                                    $("#page-9 .zs-7").addClass("fadeOut");
                                                    $("#page-9 .zs-1").addClass("fadeOut");
                                                    $("#page-9 .zs-8").addClass("fadeOut");
                                                    $("#page-9 .ol-1").fadeOut();
                                                    $("#page-9 .ol-4").fadeOut();
                                                }, 200);
                                                hidePage9WordA(function () {

                                                });
                                                hidePage9Line(function () {
                                                    $("#page-9").hide();
                                                    endPage9();
                                                });
                                            }, 2e3);
                                        })
                                    })
                                });
                            }, 3e3);
                        })
                    }, 800);

                });
            })
        }, 500);

    }

    var showPage9Line = function (cb) {
        $("#page-9 .line").animate({
            width: "4.572916rem"
        }, 800, "linear", function () {
            cb && cb();
        });
    }

    var hidePage9Line = function (cb) {
        $("#page-9 .line").animate({
            width: "0"
        }, 800, "linear", function () {
            cb && cb();
        });
    }

    var blinkPage9Hui = function (cb) {
        cb && cb();
        return;
        var t = 300;
        $("#page-9 .uphui").animate({
            "opacity": "1"
        }, t, "linear", function () {
            $("#page-9 .uphui").animate({
                "opacity": "0"
            }, t, "linear", function () {
                $("#page-9 .uphui").animate({
                    "opacity": "1"
                }, t, "linear", function () {
                    $("#page-9 .uphui").animate({
                        "opacity": "0"
                    }, t, "linear", function () {
                        cb && cb();
                    })
                })
            })
        })
    }

    //step 1
    var movePage9Word = function (cb) {
        $("#page-9 .uphui").css({
            "opacity": "1"
        });
        $("#page-9 .zs-2").animate({
            "opacity": 1,
            'transform': 'translate(0rem,0rem)',
            '-webkit-transform': 'translate(0rem,0rem)'
        }, 800, "linear", function () {
            cb && cb();
        })
    }

    var hidePage9Word = function (cb) {
        $("#page-9 .zs-2").animate({
            "opacity": 0,
            'transform': 'translate(4.6093rem, -0.5rem)',
            '-webkit-transform': 'translate(4.6093rem, -0.5rem)'
        }, 800, "linear", function () {
            cb && cb();
        })
    }

    //step 2
    var movePage9WordA = function (cb) {
        $("#page-9 .zs-5").animate({
            "opacity": 1,
            'transform': 'translate(0rem,0rem)',
            '-webkit-transform': 'translate(0rem,0rem)'
        }, 800, "linear", function () {
            cb && cb();
        })
    }

    var hidePage9WordA = function (cb) {
        $("#page-9 .zs-5").animate({
            "opacity": 0,
            'transform': 'translate(4.6093rem, -0.5rem)',
            '-webkit-transform': 'translate(4.6093rem, -0.5rem)'
        }, 800, "linear", function () {
            $("#page-9 .uphui").css({
                "opacity": "0"
            });
            cb && cb();
        })
    }

    var showPage9Oile = function (cb) {
        $("#page-9 .zs-8").show()
        setTimeout(function () {
            $("#page-9 .ol-1").css("display", "block");
            $("#page-9 .ol-1").one(aniend, function () {
                $("#page-9 .ol-1").hide();
            })

            $("#page-9 .ol-2").animate({
                opacity: 1
            }, 1e3, "linear", function () {
                $("#page-9 .ol-3").animate({
                    opacity: 1
                }, 1e3, "linear", function () {
                    $("#page-9 .ol-2").fadeOut();
                    $("#page-9 .ol-4").animate({
                        opacity: 1
                    }, 1e3, "linear", function () {
                        $("#page-9 .ol-3").fadeOut();
                        cb && cb();

                    });
                });
            })

        }, 800);

    }
</script>